<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>排行榜</title>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/art-template/lib/template-web.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/common.js"></script>
    <link rel="stylesheet" href="./css/common/reset.css">
    <link rel="stylesheet" href="./css/common/common.css">
    <link rel="stylesheet" href="./css/base/base.css">
    <link rel="stylesheet" href="./css/common/search.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="shortcut icon" href="./resource/static/favicon.ico" type="image/x-icon">

    <style>
        .pageation {
            width: 200px;
            margin: 25px auto 0;
        }
        .pageNation {
        }
        .pageNation nav {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .pageNation nav ul{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .pageNation ul li {
            width: 55px;
            height: 30px;
            background-color: #227274;
            margin-right: 20px;
            border-radius: 10px;
        }
        .pageNation ul li a{
            width: 55px;
            height: 30px;
            line-height: 30px;
        }
        .pageNation ul li a span{
            display: inline-block;
            margin-left: 16px;
            color: #fff!important;

        }
        .pageNation ul li a:hover span {
            color: #DAFDF8 !important;
        }
    </style>
</head>

<body>
    <!-- 头部部分 -->
    <header></header>
    <!-- main -->
    <main>
        <div class="main" style="min-height: 490px!important;">
            <div class="search_banner">
                <div class="search_input fx_sb">
                    <input type="text" class="se_input" placeholder="病变">
                    <a class="search_icon" title="搜索"></a>
                </div>
                <div class="search_detail">
                    搜索"<span class="search_ct">病变</span>"
                    ,找到<span class="songCount">20</span>首
                </div>


                <ul class="m-tabs m-tabs-srch" style="margin-bottom: auto;">
                    <li class="fst"><a class="z-slt"><em>单曲</em></a></li>
                    <li><a><em>歌手</em></a></li>
                    <li><a class=""><em>专辑</em></a></li>
                    <li><a><em>视频</em></a></li>
                    <li><a><em>歌词</em></a></li>
                    <li><a><em>歌单</em></a></li>
                    <li><a><em>声音主播</em></a></li>
                    <li><a><em>用户</em></a></li>
                </ul>

                <div class="n-srchrst">
                    <div class="srchsongst"></div>
                </div>
                <div class="pageation"></div>
            </div>
        </div>
    </main>
    <!-- footer页面 -->
    <footer></footer>

    <script type="text/html" id="tpl">
        <% data.forEach (function (item, index) {%>
            <!-- 第一个变色 -->
            <div class="item f-cb h-flag  ">
                <div class="td">
                    <div class="hd"><a class="ply" title="播放"></a></div>
                </div>
                <div class="td w0">
                    <div class="sn">
                        <div class="text">
                            <a><b><%= item.name %></b></a>
                        </div>
                    </div>
                </div>
                <div class="td">
                    <div class="opt hshow">
                        <a class="u-icn u-icn-81 icn-add" title="添加到播放列表"></a>
                        <span class="icn icn-fav" title="收藏"></span>
                        <span class="icn icn-share" title="分享"></span>
                        <span class="icn icn-dl" title="下载">
                        </span>
                    </div>
                </div>
                <div class="td w1">
                    <div class="text">
                        <% let res = item.artists %>
                        <% let str = ''; let separator = '' %>
                        <% res.forEach (function (item, index) {%>
                            <% str += separator + item.name %>
                            <% separator = '/' %>
                            <% if (!!item) {return;}%>
                        <% }) %>
                        <%= str%>
                    </div>
                </div>
                <div class="td w2">
                    <div class="text"><a class="s-fc3" href="#">《{{ item.album.name }}》</a>
                    </div>
                </div>
                <div class="td">{{ item.duration | dateTimeFormat }}</div>
            </div>
        <% }) %>
    </script>

    <!-- 分页渲染 -->
    <script type="text/html" id="page">
        <div class="pageNation">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <% for (let [text, pid] of pager) { %>
                    <li>
                        <a href="javascript:searchWords(<%=pid %>);" aria-label="Previous">
                            <span aria-hidden="true"><%=text %></span>
                        </a>
                        </li>
                    <% } %>
                </ul>
                </nav>
        </div>
    </script>
    <script src="./js/search.js"></script>
    
    <script src="./js/module/appendID.js"></script>

</body>

</html>